@charset "utf-8";
@import "base/cssreset.scss";
@import "base/necessary.scss";
@import "base/common.scss";
@import "base/header.scss";
@import "base/footer.scss";
/*warn begin:这里原本来要放在_extend.scss里面的，但是由于home.scss import _necessary.scss 而_necessary.scss import _extend.scss，导致背景图片路径怎么相对都是错误的，
现在的解决方法是涉及图片路径的都放在这里，暂时过度，待找到原因
*/
.swiper-container{
  /*padding-top:66.66666666666667%;/*500/700*/
  height: px2rem(500);
  a{
    width: 100%;
    height: 100%;
  }
  .swiper-pagination{
    &.swiper-pagination-bullets{
      bottom: px2rem(20);
      .swiper-pagination-bullet{
        vertical-align: bottom;
        width: px2rem(10);
        height:px2rem(10);
        margin:0 px2rem(10) 0 0 important();
        opacity: 1;
        background:url(../images/icon/dot.png) scroll no-repeat center center important();
        @extend .contain;
        &.swiper-pagination-bullet-active{
          background:url(../images/icon/dot_on.png) scroll no-repeat center center important();
          @extend .contain;
        }
      }
    }
  }
}
/*lazyload*/
/*background lazyload style*/
.bg_lazyload{
  &[lazy=loading]{
    background:url(../images/icon/lazy_load_loading.png) scroll no-repeat center center important();
    background-size: px2rem(159) important();
  }
  &[lazy=error]{
    background:url(../images/icon/lazy_load_fail.png) scroll no-repeat center center important();
    background-size: px2rem(138) important();
  }
  &[lazy=loaded]{
    @extend .cover;
  }
}
/*img lazyload style*/
.img_lazyload{
  &[lazy=loading]{
      background:url(../images/icon/lazy_load_loading.png) scroll no-repeat center center important();
      background-size: px2rem(159) important();
  }
  &[lazy=error]{

  }
  &[lazy=loaded]{

  }
}
/*lazyload*/
.arrow_right{
  &:after{
    content:'';
    display: inline-block;
    position:absolute;
    right:0;
    top:50%;
    margin-top: px2rem(-12);
    width:px2rem(15);
    height:px2rem(25);
    background: url(../images/icon/arrow_right.png) scroll no-repeat center center;
    @extend .contain;
  }
}
.checkbox_wrap{
  &.select_all span:after{
    content:'全选';
    display:inline-block;
    width: px2rem(100);
    text-align: left;
    position: absolute;
    top:0;
    left: px2rem(60);
    line-height: px2rem(40);
    @include px2px(font-size,30)
  }
  padding-right: px2rem(24);
  .checkbox_label{
    display: inline-block;
    vertical-align:top;
    line-height: 1;
    position: relative;
    width:px2rem(40);
    height: 100%;
    input{
      @extend .none;
      &:checked + span:before{
        background: url(../images/icon/checkbox_on.png) scroll no-repeat center center;
        @include bg_size_rem(40);
      }
    }
    span{
      width:100%;
      height:px2rem(40);
      display: inline-block;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: px2rem(-20);
      &:before{
        content:'';
        width:100%;
        height:100%;
        display:inline-block;
        background: url(../images/icon/checkbox.png) scroll no-repeat center center;
        @include bg_size_rem(40);
      }
    }
  }
}
/*warn end*/
.list_bottom{
  padding: px2rem(30) px2rem(24);
  @extend .text_center;
  color:$color_9E9E9E;
  @extend .relative;
  @include px2px(line-height,32);
  @include px2px(font-size,28);
  span{
    &.finished{
      &:before{
        @extend .none;
      }
    }
    &:before{
      content: '';
      @extend .inline_block;
      @include px2px(width,32);
      @include px2px(height,32);
      background: url(../../assets/images/icon/loading.gif) scroll no-repeat center center;
      @extend .contain;
      vertical-align: top;
      margin-right: px2rem(10);
    }
  }
}

